<template>
  <el-row :gutter="20">
    <el-col :span="5" class="logo">
      <el-icon color="#00afff" :size="40">
        <checked/>
      </el-icon>
      <span class="title-font">
      g-designer
    </span>
    </el-col>
    <el-col :span="2" :offset="17" class="button-group">
      <el-button type="primary" @click="()=>{this.exportPanelVisible = true}">生成模板文件</el-button>
    </el-col>
    <el-dialog v-model="exportPanelVisible" title="选择生成模板">
      <el-form v-model="exportPanelForm" label-width="120px">
        <el-form-item label="导出文件名称">
          <el-input v-model="exportPanelForm.fileName"/>
        </el-form-item>
        <el-form-item label="导出面版">
          <el-select v-model="exportPanelForm.panelId" class="m-2" placeholder="Select" size="large">
            <el-option
                v-for="item in panelItems"
                :key="item.id"
                :label="item.name"
                :value="item.id"
            />
          </el-select>
        </el-form-item>
        <el-row class="button-group">
          <el-button type="primary" @click="createVueFile">确认</el-button>
          <el-button @click="cancel">取消</el-button>
        </el-row>
      </el-form>
    </el-dialog>
  </el-row>

</template>

<script>
import {exportVueFile} from "@/common/vueFileTool";
import {mapState} from "vuex";

export default {
  name: "main-home-head",
  props: {},
  components: {},
  data() {
    return {
      exportPanelVisible: false,
      exportPanelForm: {
        fileName: '',
        panelId: ''
      }
    }
  },
  computed: mapState({
    activePanelId: 'activePanelId',
    panelItems(state) {
      let res = [];
      let panelIds = Object.keys(state.panelData);
      for (let i = 0; i < panelIds.length; i++) {
        res.push({
          label: state.panelData[panelIds[i]].name,
          id: panelIds[i]
        });
      }
      return res;
    }
  }),
  methods: {
    cancel() {
      this.exportPanelForm = {
        fileName: '',
        panelId: ''
      }
      this.exportPanelVisible = false
    },
    createVueFile() {
      exportVueFile(this)
    }
  },
  mounted() {
  },
  created() {
  }
}
</script>

<style lang="less" scoped>
.logo {
  display: flex !important;
  flex-direction: row;
  justify-content: flex-start;
  align-content: center;
  flex-wrap: nowrap;
  align-items: center;
}

.button-group {
  display: flex !important;
  flex-direction: row;
  flex-wrap: nowrap;
  align-content: center;
  justify-content: flex-start;
  align-items: center;

  .el-button {
    display: flex;
  }
}

</style>
